<template>
  <div class="container">
    <div class="top-search-box">
      <div class="t1">
        <van-search
          v-model="keyWord"
          placeholder="请输入搜索关键词"
          show-action
          shape="round"
        >
          <div slot="action" @click="getActivity">搜索</div>
        </van-search>
        <div class="shaixuan" @click="showRightPopup = true"><van-icon name="qr" /></div>
      </div>
      <van-dropdown-menu>
        <van-dropdown-item v-model="typeId" :options="typeList" @change="getActivity" />
      </van-dropdown-menu>
    </div>
    <product-list :product-list="productList"/>
    <!--筛选弹窗-->
    <van-popup
      v-model="showRightPopup"
      position="right"
      closeable
      :style="{ width: '80%',height:'100%' }"
    >
      <div class="sxBox">
        <div class="sxTitle">按条件筛选</div>
        <div class="sxContainer">
          <div class="title">排序</div>
          <div class="xiang">
            <span
              v-for="item in option1"
              :key="item.value"
              :class="[item.value == sortValue ?'active':'']"
              @click="changeTag1(item.value)"
            >
              {{item.text}}
            </span>
          </div>
          <div class="title">费用</div>
          <div class="xiang">
            <span
              v-for="item in option2"
              :key="item.value"
              :class="[item.value == feeValue ?'active':'']"
              @click="changeTag2(item.value)"
            >
              {{item.text}}
            </span>
          </div>
          <div class="title">活动状态</div>
          <div class="xiang">
            <span
              v-for="item in option3"
              :key="item.value"
              :class="[item.value == statusValue ?'active':'']"
              @click="changeTag3(item.value)"
            >
              {{item.text}}
            </span>
          </div>
        </div>
        <div class="sxFooter">
          <van-button plain square type="info" style="background-color: #eee" @click="resetValue">重置</van-button>
          <van-button square type="info" @click="getActivity">确定</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import productList from '../components/productList'
import wx from 'weixin-js-sdk'

export default {
  name: 'NcMain',
  components: {productList},
  data () {
    return {
      showRightPopup: false,
      typeId: null,
      keyWord: null,
      sortValue: 1,
      sortObj: {
        createTime: null,
        enrollment: null
      },
      feeValue: null,
      statusValue: null,
      option1: [
        { text: '综合排序', value: 1 },
        { text: '最新发布', value: 2 },
        { text: '人气最高', value: 3 }
      ],
      option2: [
        { text: '不限', value: null },
        { text: '只看免费', value: '0' },
        { text: '只看收费', value: '1' }
      ],
      option3: [
        { text: '不限', value: null },
        { text: '报名中', value: '01' },
        { text: '未开始', value: '02' },
        { text: '已暂停', value: '03' },
        { text: '已结束', value: '04' }
      ],
      productList: [],
      typeList: [{
        text: '所有类型', value: null
      }]
    }
  },
  created () {
    this.actType()
    this.getActivity()
  },
  activated () {
    this.weiShare()
  },
  methods: {
    actType () {
      this.$http.post('/actType/getAll').then(res => {
        if (res.state == '200') {
          res.data.forEach(item => {
            this.typeList.push({
              text: item.name,
              value: item.id
            })
          })
        }else{
          this.$toast(res.message)
        }
      })
    },
    getActivity () {
      const params = {
        // 活动类型id
        'typeId': this.typeId,
        // 活动名称
        'name': this.keyWord,
        // 是否免费
        'isFree': this.feeValue,
        // 活动状态
        'status': this.statusValue,
        // 活动发布时间排序 ASC增序  DESC倒序
        'createTime': this.sortObj.createTime,
        // 活动报名人数排序 ASC增序  DESC倒序
        'enrollment': this.sortObj.enrollment
      }
      this.$http.post('/activity/findActivity', params).then(res => {
        if (res.state == '200') {
          this.productList = res.data
        }
      }).catch(err => {
        this.$toast(err)
      })
      this.showRightPopup = false
    },
    changeTag1 (val) {
      this.sortValue = val
      this.sortObj = {
        createTime: val == 2 ? 'DESC' : null,
        enrollment: val == 3 ? 'DESC' : null
      }
    },
    changeTag2 (val) {
      this.feeValue = val
    },
    changeTag3 (val) {
      this.statusValue = val
    },
    resetValue () {
      this.keyWord = null
      this.sortValue = 1
      this.sortObj = {
        createTime: null,
        enrollment: null
      }
      this.feeValue = null
      this.statusValue = null
      this.getActivity()
    },
    weiShare(){
      wx.ready(()=>{
        const shareData = {
          title:'凡星艺彩活动报名开始了',
          desc:'快来报名吧',
          link:location.href,
          imgUrl:'https://wx.api.fanxingwenchuan.com/profile/upload/logo/logo.jpg',
          success: function() {},
          cancel: function (){
            alert('已取消分享')
          }
        }
        wx.onMenuShareAppMessage(shareData)
        wx.onMenuShareTimeline(shareData)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;
  .top-search-box {
    flex-shrink: 0;
    .t1{
      display: flex;
      align-items: center;
      background-color: #fff;
      .shaixuan{
        flex-shrink: 0;
        padding: 0 15px 0 10px;
        font-size: 20px;
      }
    }
    .t1 /deep/ .van-search{
      flex: 1 1 auto;
    }
  }
  .top-search-box /deep/ .van-search__action {
    padding: 0 15px;
  }
}

/deep/ .van-dropdown-menu{
  border-bottom: 1px solid #f1f1f1;
}
/deep/ .van-dropdown-menu__bar{
  box-shadow: none;
}

.sxBox{
  display: flex;
  flex-direction: column;
  height: 100%;
  .sxTitle{
    font-size: 16px;
    flex-shrink: 0;
    padding: 15px;
  }
  .sxContainer{
    flex: 1 1 auto;
    overflow-y: auto;
    .title{
      font-size: 14px;
      color: #333333;
      padding: 15px;
    }
    .xiang{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 10px;
      span{
        width: 30%;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 36px;
        border: 1px solid #f1f1f1;
        border-radius: 3px;
        margin-bottom: 6px;
        margin-right: 5px;
      }
      span.active{
        color: #ff6400;
        border-color: #ff6400;
      }
    }
  }
  .sxFooter{
    flex-shrink: 0;
    display: flex;
    button{
      flex: 1;
      border: 0;
    }
  }
}
</style>
